const HtmlWebpackPlugin = require("html-webpack-plugin");
const { resolve } = require("path");
 
 
 module.exports = {
     entry:'./src/index.js',
     output:{
         filename:'built.js',
         path:resolve(__dirname,'build'),
     },
     module:{
         rules:[
            /**
             * js兼容性处理：babel-loader @babel/core @babel/preset-env
               1.只能转换基本js语法：  @babel/preset-env
               2.全部js兼容性处理：@babel/polyfill
                 问题：我只要解决部分兼容问题，但是将所有的兼容性代码引入，体积太大了
               3.需要做兼容性处理的就做：按需加载 ->core-js
                
            */
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    //预设：指示babel做怎么样的兼容性处理
                    presets:[[
                        '@babel/preset-env',
                        {
                            //按需加载
                            useBuiltIns:'usage',
                            //指定core-js版本
                            corejs:{
                                version:3
                            },
                            //指定具体兼容性做到哪个版本浏览器
                            targets:{
                                chrome:'60',
                                firefox:'60',
                                ie:'9',
                                safari:'10',
                                edge:'17'
                            }
                        }
                    ]]
                }
            }
         ]
     },
     plugins:[
         new HtmlWebpackPlugin({
             template:'./src/index.html'
         })
     ],
     mode:'development',
 }